<template>
  <div class="orderdetail">
    <van-nav-bar
      title="orderdetail"
      left-text="返回"
      right-text="Mine"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="orderinfo">
      <p>订单收件人：{{ order.receiver }}</p>
      <p>订单总价格： ￥{{ order.price }}</p>
      <p>订单收货地址：{{ order.address }}</p>
      <p>订单号：{{ order._id }}</p>
      <p>订单日期：{{ order.createdAt }}</p>
      <h3>购买商品为：</h3>

      <van-card
        v-for="item in product"
        :key="item._id"
        :num="item.quantity"
        :price="item.price"
        :title="item.product.name"
        :thumb="item.product.coverImg"
        @click="toDetail(item.product._id)"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqorderdetail } from "@/api/order";
export default {
  data() {
    return {
      order: {},
      product: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async orderinfo() {
      const res = await reqorderdetail(this.$route.params.id);
      console.log(res);
      this.order = res.order;
      this.product.push(...res.details);
      //   console.log("this.order", this.order);
      console.log("this.product", this.product);
    },
    toDetail(id) {
      console.log("id", id);
      this.$router.push("/detail/" + id);
    },
    onClickLeft() {
      this.$router.go(-1);
      Toast("返回");
    },
    onClickRight() {
      this.$router.push("Mine");
      Toast("按钮");
    },
  },
  created() {
    this.orderinfo();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
